<!--
 * @Author: xiawei 1243162387@qq.com
 * @Date: 2024-04-28 07:25:48
 * @LastEditors: xiawei 1243162387@qq.com
 * @LastEditTime: 2024-04-28 07:26:14
-->
<template>
    <div class="edit-row">
        <el-icon @click="goEdit" size="30" color="#409eff">
            <Edit />
        </el-icon>
    </div>
    <el-scrollbar>

        <div class="document">

            <v-md-preview :text="code"></v-md-preview>
        </div>
    </el-scrollbar>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import useFile from '@/hooks/useFile'
const code = ref('')
const router = useRouter();
const goEdit = () => {
    if (import.meta.env.DEV) {
        router.push({
            path: '/uicomp/code',
            query: {
                file: 'tree.text'
            }
        })
    }
}
const { getFile } = useFile()
onMounted(async () => {
    const { result } = await getFile('tree.text')
    if (result) {
        code.value = result
    }
})
</script>
<style scoped>
.document {
    color: #2c3e50;
    text-align: left;
    position: relative;
}

.edit-row {
    position: absolute;
    right: 20px;
    top: 20px;
    text-align: right;
    display: flex;
    flex-direction: row;
    align-items: center;
    z-index: 10000;
}

.el-icon {
    cursor: pointer;
}

.title {
    text-align: left;
    font-weight: 500;
}
</style>